import { forwardRef, useImperativeHandle } from "react"
import { useState } from "react"
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField } from "@mui/material"
import { changePasswordAPI } from "../../../apis/user"
import { useNavigate } from "react-router-dom"

const ChangePwdDialog = forwardRef((props, ref) => {

    const navigate = useNavigate()

    // 要修改成为的密码
    const [newPassword, setNewPassword] = useState({
        newPassword1: '',
        newPassword2: ''
    })

    // 修改 newpassword1
    const changeNewPassword1 = (e) => {
        setNewPassword({
            ...newPassword,
            newPassword1: e.target.value
        })
    }

    // 修改 newpassword2    
    const changeNewPassword2 = (e) => {
        setNewPassword({
            ...newPassword,
            newPassword2: e.target.value
        })
    }

    // 用户修改密码
    const userModifyPassword = async () => {
        let { newPassword1, newPassword2 } = newPassword
        if (newPassword1 == '' || newPassword2 == '') {
            alert('密码不能为空')
            return
        }
        if (newPassword1.length < 6) {
            alert('密码长度不能小于6位')
            return
        }
        if (newPassword1 != newPassword2) {
            alert('两次密码不一致')
        } else {
            let res = await changePasswordAPI(newPassword.newPassword1)
            console.log('修改密码', res);

            if (res.code == 1) {
                alert('修改密码成功,请重新登录')
                navigate('/', { replace: true })
            } else {
                alert('修改密码失败')
            }
        }

    }


    const [open, setOpen] = useState(false);

    useImperativeHandle(ref, () => ({
        openDialog: () => {
            setOpen(true);
        },
        closeDialog: () => {
            setOpen(false);
        }
    }));

    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };


    return (
        <>
            <Dialog
                open={open}
                onClose={handleClose}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    flexDirection: 'column',
                    justifyContent: 'center'
                }}
            >
                <DialogTitle id="alert-dialog-title">
                    修改密码
                </DialogTitle>
                <DialogContent>
                    <TextField
                        style={{
                            width: '100%'
                        }}
                        id="newpassword"
                        value={newPassword.newPassword1}
                        label="输入新密码"
                        variant="standard"
                        onChange={changeNewPassword1}
                    />
                    <TextField
                        style={{
                            width: '100%'
                        }}
                        id="newpassword2"
                        value={newPassword.newPassword2}
                        label="再次输入新密码"
                        variant="standard"
                        onChange={changeNewPassword2}
                    />
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose}>再想想</Button>
                    <Button autoFocus onClick={userModifyPassword}>
                        确定修改
                    </Button>
                </DialogActions>
            </Dialog>
        </>
    )
})

export default ChangePwdDialog